<div class="modal-shadow">
    <div class="video-container">
        <span class="video-close" (click)="closeModal()"></span>
        <video #videoTag [src]="url" (canplay)="videoCanplay()" (ended)="videoEnd()" autoplay></video>
        <div class="video-toolbar">
            <div class="video-play float-left play" (click)="pause()" *ngIf="state === 'play'"></div>
            <div class="video-play float-left pause" (click)="play()" *ngIf="state === 'pause'"></div>
            <div class="video-current-time float-left">{{currentTime >= 0 ? (currentTime | videoTime) : ''}}</div>
            <div class="video-range float-left" (click)="changeCurrentTime($event)">
                <div>
                    <div class="float-left" [ngStyle]="{'width': videoTag ? videoTag.currentTime / videoTag.duration * 100 + '%' : 0}"></div>
                </div>
            </div>
            <div class="video-duration float-left">{{videoTag && videoTag.duration >= 0 ? (videoTag.duration | videoTime) : ''}}</div>
        </div>
    </div>
</div>